import { Button, Result } from 'antd'
import cs from 'classnames'
import { useContext } from 'react'
import { useHistory } from 'react-router-dom'

import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'

import locale from './locale'
import styles from './style/index.module.less'

function Exception403() {
  const t = useLocale(locale)
  const { rtl } = useContext(GlobalContext)
  const history = useHistory()
  const onBack = () => {
    history.goBack()
  }
  return (
    <div className={cs('flex items-center justify-center', rtl ? 'rtl' : 'ltr')}>
      <Result
        className={styles.result}
        status="403"
        subTitle={t['exception.result.403.description']}
        extra={
          <Button key="back" type="primary" onClick={onBack}>
            {t['exception.result.403.back']}
          </Button>
        }
      />
    </div>
  )
}

export default Exception403
